01. Sass Basics

FEND C4 L3 A01 WHAT IS SASS

Using Sass

When a developer writes a .scss file, there is a problem. Browsers don’t know what Sass is, they don’t run Sass, they run CSS. Sass transpiles to CSS - or in more common english - Sass can be directly translated to CSS. Anything you write in Sass can be written in 100% pure CSS, they are equivalent to each other, but the Sass syntax is going to be much shorter and easier to write than the CSS.

Sass now comes with some of its own tools to run that translation process to create CSS, but since we’re using webpack anyway, we’re going to leverage webpack to do that job.

Quiz

From what you have learned of webpack loaders and plugins, which one do you think we will need to turn our .scss files into .css files?
SOLUTION: A Loader

Quiz

QUESTION:

Reflect

Do you have any previous experience with sass?

ANSWER:

Thanks for your response!

Quiz

CSS is valid Sass and Sass can be transpiled to pure CSS
SOLUTION: True

Interview Question

QUESTION:

Interview Question

Name two or three reasons developers often prefer to work with sass or less over vanilla css.

ANSWER:

Some common answers would be:
Terser, more efficient syntax than css (like sass nesting)
Extra syntax options (like the sass ampersand)
More flexibility (sass variables, mixins, and includes)

Conclusion

Learning sass is worth every minute of your time as you hone your front end developer skills. These days it is pretty much required knowledge and it could be a whole course of its own. Unfortunately, this course is jam-packed enough as it is so we aren’t going to spend much time here. On the bright side, the sass website has a good tutorial that will take you through all the basics. In the next few sections, I’ll highlight three of the concepts I think are most important to learn about sass.

Next Concept